<template>
  <div class="ticket-container">
    <!-- tab导航 -start-->
    <tabs />
    <!-- tab导航 -end-->
    <div v-show="!showStatPage">
      <!-- 搜索 start -->
      <el-row type="flex" justify="space-between" class="search-wrapper">
        <div class="search-form">
          <el-form inline :model="searchForm" size="mini">
            <!--<el-form-item>-->
            <!--  <el-select v-model="searchForm.target_user_type" placeholder="目标用户">-->
            <!--    <el-option-->
            <!--      v-for="op in targetUserTypeOptions"-->
            <!--      :key="op.value"-->
            <!--      :label="op.title"-->
            <!--      :value="op.value"-->
            <!--    />-->
            <!--  </el-select>-->
            <!--</el-form-item>-->
            <el-form-item>
              <el-input v-model="searchForm.title" placeholder="活动名称" />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="doSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button
            v-auth="'market.ticket.create'"
            type="primary"
            size="mini"
            @click="createdTicket"
          > 新建活动
          </el-button>
        </div>
      </el-row>
      <!-- 搜索 end-->
      <left-right-layout left-title="全部活动" :right-title="false">
        <template v-slot:left>
          <div class="ticket-list">
            <el-scrollbar v-loading="ticketLoading" class="ticket-list-scrollbar">
              <el-row
                v-for="ticket in ticketDatas"
                v-show="ticketDatas.length > 0"
                :key="ticket.id"
                type="flex"
                justify="space-between"
                class="ticket-item"
                :class="{active:activeId === ticket.id}"
                @click.native="showDetails(ticket)"
              >
                <label>{{ ticket.title }}</label>
                <div class="action-container" @click.stop>
                  <el-dropdown trigger="click" placement="bottom-start">
                    <i class="el-icon-more" />
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-auth="'market.ticket.edit'" @click.native="updatedTicket(ticket)">编辑
                      </el-dropdown-item>
                      <el-dropdown-item v-auth="'market.ticket.delete'" @click.native="deletedTicket(ticket)">删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-row>
              <el-empty v-if="ticketDatas.length === 0" description="暂无活动">
                <template v-slot:image>
                  <div />
                </template>
                <el-button
                  v-auth="'market.ticket.create'"
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="createdTicket"
                > 新建活动
                </el-button>
              </el-empty>
            </el-scrollbar>
          </div>
        </template>
        <template v-slot:right>
          <!-- 表格 start-->
          <edu-page-table
            :doactions="doactions"
            :checkbox-item="false"
            :custom-components="customComponents"
          />
        </template>
      </left-right-layout>
      <!-- 新建活动 start-->
      <created-dialog :visible.sync="createdDialogVisible" @reload="reload" />
      <!-- 新建活动 end-->
      <!-- 编辑活动 start-->
      <updated-dialog v-if="updatedDialogVisible" :visible.sync="updatedDialogVisible" :ticket="currentTicket" @reload="reload" />
      <!-- 编辑活动 end-->
      <!-- 编辑活动-用于操作 start-->
      <updated-action-dialog v-if="updatedActionDialogVisible" :visible.sync="updatedActionDialogVisible" :ticket="currentTicket" @reload="reload" />
    <!-- 编辑活动-用于操作 start-->
    </div>
    <transition name="el-fade-in-linear">
      <!-- 数据分析 start-->
      <stat v-if="showStatPage" :ticket-id="statTicketId" @close="showStatPage = false"></stat>
    <!-- 数据分析 end-->
    </transition>
  </div>
</template>

<script>

import Tabs from './tabs';
import LeftRightLayout from '@/components/left-right-layout'
import CreatedDialog from './CreatedDialog'
import UpdatedDialog from './UpdatedDialog'
import UpdatedActionDialog from './UpdatedActionDialog'
import EduPageTable from '@public/template/page_list/table.vue';
import TargetUserType from './components/targetUserType'
import Status from './components/status'
import Stat from './stat'

export default {
  name: 'Ticket',
  components: {
    Tabs,
    LeftRightLayout,
    CreatedDialog,
    UpdatedDialog,
    UpdatedActionDialog,
    EduPageTable,
    Stat
  },
  inject: ['reload'],
  data() {
    return {
      xUri: '/admin/market/ticket/issueno',
      xParams: {},
      customComponents: {
        target_user_type: TargetUserType,
        status: Status
      },
      doactions: [
        { title: '详情', meta: { permission: 'market.ticket.details' }, callback: this.manage },
        { title: '数据', meta: { permission: 'market.ticket.data' }, callback: this.stat },
        { title: '编辑', meta: { permission: 'market.ticket.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'market.ticket.delete' }, callback: this.delete }
      ],
      ticketLoading: false,
      searchForm: {
        target_user_type: undefined,
        title: undefined
      },
      targetUserTypeOptions: [
        { title: '全部用户', value: 0 },
        { title: '新用户', value: 1 },
        { title: '购买用户', value: 2 },
        { title: '沉默用户', value: 3 }
      ],
      ticketDatas: [],
      activeId: 0,
      currentTicket: {}, // 当前操作的活动数据
      createdDialogVisible: false,
      updatedDialogVisible: false,
      updatedActionDialogVisible: false,
      statTicketId: 0, // 统计活动id
      showStatPage: false // 显示统计分析页面
    }
  },
  created() {
    this.loadLeftData()
  },
  methods: {
    // 加载活动列表
    loadLeftData() {
      this.$http.get(
          '/admin/market/ticket/list',
          { ...this.searchForm },
          ({ data }) => {
            this.ticketDatas = data.data
            this.activeId = 0
            if (this.ticketDatas.length > 0) {
              this.activeId = this.ticketDatas[0].id
            }
            this.loadRightData()
          },
          _ => {

          }
      )
    },
    // 加载期号数据
    loadRightData() {
      this.$store.dispatch('pageList/page', {
        uri: this.xUri,
        params: {
          ...this.xParams,
          pid: this.activeId
        }
      })
    },
    // 活动管理
    manage({ row }) {
      this.$router.push({ path: '/market/ticket/' + row.id + '/manage' })
    },
    // 数据统计
    stat({ row }) {
      this.statTicketId = row.id
      this.showStatPage = true
    },
    // 新建活动
    createdTicket() {
      this.createdDialogVisible = true
    },
    edit({ row }) {
      this.currentTicket = this.$util.deepClone(row)
      this.updatedActionDialogVisible = true
    },
    // 更新活动
    updatedTicket(ticket) {
      this.currentTicket = this.$util.deepClone(ticket)
      this.updatedDialogVisible = true
    },
    // 删除活动周期
    delete({ row }) {
      this.deletedTicket(row)
    },
    // 删除活动
    deletedTicket(row) {
      const txt = row.pid == 0 ? '将同时删除所有活动周期，确认删除吗' : '确认删除吗'
      this.$box
          .confirm(txt)
          .then(() => {
            this.$http.delete(
                '/admin/market/ticket/' + row.id,
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    },
    // 显示活动期号列表
    showDetails(ticket) {
      this.activeId = ticket.id
      this.loadRightData()
    },
    // 搜索
    doSearch() {
      this.loadLeftData()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";

.ticket-container {
  height: 100%;

  .ticket-list {
    height: 100%;

    .ticket-list-scrollbar {
      height: calc(100vh - 142px);

      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      .create-btn {
        margin-top: 14px;
      }

      .ticket-item {
        @include lineItem;
      }
    }
  }

  .search-wrapper {
    margin-bottom: 20px;

    .search-form {
      margin-left: 20px;
    }

    .search-btn {
      margin-right: 30px;
    }
  }

 ::v-deep .table-wrapper {
    margin: 0 30px 32px 0;
  }
}

</style>
